<template>
    <view id="addCard">
        <view class="form">
        	<view class="form-title">{{type=='bank'?'持卡人':'真实姓名'}}</view>
        	<input class="uni-input" name="cardholder" maxlength="20" v-model="cardholder" :placeholder="cardNamePlaceholder" />
            <view class="form-action"></view>
        </view>
        <view class="form" v-if="type=='bank'">
        	<view class="form-title">卡号</view>
        	<input class="uni-input" name="cardNumber" @blur="getBankName" maxlength="24" v-model="cardNumber" placeholder="请输入卡号" />
            <view class="form-action"></view>
        </view>
        <view class="form" v-if="type=='bank'">
        	<view class="form-title">所属银行</view>
        	<input class="uni-input" name="bank" v-model="bank"  disabled="true" placeholder="所属银行" />
            <!-- <view class="form-action"><uni-icons type="arrowright"  size="20" /></view> -->
            <!-- <picker class="picker" :value="bankIndex" :range="bankArr" @change="bankChange">
                <input class="uni-input" name="bank" :value="bank" placeholder="请选择所属银行" />
                <uni-icons class="picker-icons" type="arrowright"  size="20" />
            </picker> -->
        </view>
        <view class="form top-margin">
        	<view class="form-title">手机号码</view>
        	<input class="uni-input" name="phone" maxlength="11" v-model="phone" placeholder="请输入手机号码" />
            <view class="form-action"></view>
        </view>
        <view class="form top-margin">
        	<view class="form-title">验证码</view>
        	<input class="uni-input" name="code" maxlength="6" v-model="code" placeholder="请输入验证码" />
            <view class="form-action"><button class="sendBtn" @click="sendCode" type="info" :disabled="codeBtn.disabled" size="mini">{{codeBtn.text}}</button></view>
        </view>
        <button @click="submitFun" class="btn" type="primary" >{{btnText}}</button>
    </view>
</template>
<script>
    import uniIcons from '@/components/uni-icons/uni-icons.vue'
    import validate from '@/common/ys-validate.js'
    import { bankCardAttribution } from "@/common/bankcard.js"
    import { bindBankCard, sendMessage } from "@/common/api.js"
    export default {
        name: "addCard",
        data() {
            return {
                cardholder:'',
                cardNumber:'',
                bank:'',
                code:'',
                phone:'',
                type:'bank',
                btnText:'确定添加',
                codeBtn:{
                    disabled:false,
                    text:'发送验证码'
                },
                cardNamePlaceholder:'请输入持卡人',
                // bankIndex:0,
                // bankArr:'',
            };
        },
        components: {
            uniIcons,
        },
        onLoad(option){
        	this.type = decodeURIComponent(option.type);
            if(this.type=='ali'){
                uni.setNavigationBarTitle({
                    title: '绑定支付宝账号'
                });
                this.btnText='绑定账号';
                this.cardNamePlaceholder='请输入真实姓名'
            }
        },
        methods: {
            sendCode(){
                if(this.phone){
                    if(!validate.isPhone(this.phone)){
                        uni.showToast({
                            icon: 'none',
                            title: '请输入正确手机号'
                        })
                        return;
                    }
                    let time=60;
                    this.codeBtn.disabled=true;
                    this.codeBtn.text=`重新发送(${time})`;
                    const timer = setInterval(()=>{
                        this.codeBtn.text=`重新发送(${time--})`;
                        if(time<0){
                            this.codeBtn.disabled=false;
                            this.codeBtn.text='发送验证码'
                            clearInterval(timer)
                        }
                    },1000)
                    sendMessage({mobi:this.phone,type:'151'}).then((res)=>{
                        const data = res.data;
                        if(data.errcode==0){
                            uni.showToast({
                                icon: 'none',
                                title: '发送成功'
                            })
                        }else{
                            uni.showToast({
                                icon: 'none',
                                title: data.msg
                            })
                        }
                    })
                }else{
                    uni.showToast({
                        icon: 'none',
                        title: '请先输入手机号'
                    })
                }
            },
            submitFun(){
                if(!/^[a-zA-Z\u4e00-\u9fa5]+$/.test(this.cardholder)){
                    uni.showToast({
                        icon: 'none',
                        title: this.type=='ali'?'请输入正确姓名':'请输入正确持卡人名称'
                    })
                    return;
                }
                if(!this.bank && this.type!='ali'){
                    uni.showToast({
                        icon: 'none',
                        title: '请输入正确银行卡卡号'
                    })
                    return;
                }
                if(!validate.isPhone(this.phone)){
                    uni.showToast({
                        icon: 'none',
                        title: '请输入正确的手机号'
                    })
                    return;
                }
                if(!this.code){
                    uni.showToast({
                        icon: 'none',
                        title: '请输入验证码'
                    })
                    return;
                }
                let p = bindBankCard({
                    name:this.cardholder,
                    bank_name:this.bank,
                    bank_card:this.cardNumber,
                    phone:this.phone,
                    code:this.code,
                    type:this.type=='ali'?1:0	    //是否是支付宝 0不是 1是
                }).then((res)=>{
                    const data = res.data;
                    if(data.errcode==0){
                        uni.showModal({
                            title: '提示',
                            content: this.type=="ali"?'支付宝绑定成功':'银行卡添加成功',
                            success: function (res) {
                                if (res.confirm) {
                                    uni.navigateBack({
                                        delta: 1
                                    });
                                }
                            }
                        });
                    }else if(data.errcode==1000 || data.errcode==1001){
                        uni.removeStorageSync('token');
                        uni.reLaunch({
                        	url:'/pages/home/welcome'
                        })
                    }else{
                        uni.showToast({
                        	icon: 'none',
                        	title:data.msg
                        });
                    }
                })
                return p
            },
            getBankName(e){
                console.log(bankCardAttribution(e.detail.value))
                let code=bankCardAttribution(e.detail.value)
                if(code!='error' && this.type!='ali'){
                    this.bank=code.bankName
                }else{
                    this.bank=''
                }
            }
        }
    };
</script>
<style lang="scss">
    #addCard {
        position: relative;
        padding-top: 24rpx;
        .content {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            background: #fff;
            .content-title{
                padding: 20rpx;
                padding-left: 30rpx;
                width: 70rpx;
                font-size: 56rpx;
                color: #FF565D;
            }
            .content-action{
                padding: 10rpx 30rpx;
            }
            .content-text{
                flex: 1;
                .bankcard-name{

                }
                .bankcard-detail{
                    font-size: 24rpx;
                    color: #999;
                }
            }
        }
        .withdraw-tip{
            color: #FF565D;
            padding: 20rpx;
        }
        .top-margin{
            margin-top: 20rpx;
        }
        .form{
            display: flex;
            align-items: center;
            flex: 1;
            background: #fff;

            flex-direction: row;
            justify-content: space-between;
            .form-title{
                padding: 20rpx;
                padding-left: 30rpx;
                width: 150rpx;
            }
            .form-action{
                padding: 10rpx 30rpx;
				.sendBtn{
                    color: #000;
                }
            }
            .picker{
                width: 100%;
                margin-left: 20rpx;
                position: relative;
                .uni-input{
                    padding-left: 40rpx;
                }
                .picker-icons{
                    bottom: 0px;
                    right: 40rpx;
                    position: absolute;
                }
            }
        }
        .btn{
            margin: 30rpx;
            font-size: 32rpx;
            margin-top: 60rpx;
            color: #fff;
            background: #1A66FF;
        }
    }
</style>
